﻿@{
    ViewBag.Title = "专辑列表";
}
<script src="@Url.Content("~/Scripts/jQuery.tmpl.min.js")"></script>
<script src="@Url.Content("~/Scripts/Common/pageHandler.js")"></script>
<link href="@Url.Content("~/Content/PageHandler.css")" rel="stylesheet" />
<script id="tmplAlubms" type="text/x-jquery-tmpl">
    <div style="margin-bottom: 20px;">
        <div class="divAlbumShadow" style="float: left; border: 1px solid #E7E7E7; line-height: 136px; width: 136px; border-radius: 5px; overflow: hidden; text-align: center;" title="${AlbumName}/${ArtistName}">
            <img src="/AlbumImg/${ImgUrl}" style="max-height: 140px; max-width: 140px; vertical-align: middle;" />
        </div>
        <div style="float: left; margin-left: 20px; margin-top: 20px; width: 600px;">
            <div class="divellipsis" style="">${AlbumName}---<a href="/AACInfo/SingerAlbums/${ArtistID}">${ArtistName}</a></div>
            <div>
                <div style="float: left;">年份：</div>
                <div style="float: left;">${PublishYear}</div>&nbsp;&nbsp;                
            </div>
            <div>
                <div style="float:left">风格:</div>
                <div style="float:left">${Genre}</div>
            </div>

            <div data-albumid="${ID}" class="divExpansion divButton" data-isload="false" data-status="false" style="clear: both; width: 60px; margin-top:50px;">展开专辑</div>
        </div>
        <div style="clear: both; cursor: pointer;"></div>
        <div class="divAlbumSongs" style="display: none; margin-top: 10px;" data-albumid="${ID}">
            <div style="border-bottom: solid 1px #669900; height: 18px; line-height: 18px; width: 100%;">
                <div style="float: left; width: 50px;">
                    <div style="float: left;">
                        <input class="cbSelectAll" type="checkbox" checked /></div>
                    <div>全选</div>
                </div>
                <div class="divellipsis" style="float: left; width: 300px;">
                    曲名
                </div>
                <div class="divellipsis" style="float: left; width: 300px;">
                    艺术家
                </div>
                <div style="float: left; width: 100px;">
                    风格
                </div>
                <div style="float: left; width: 100px; text-align: center;">
                    播放次数
                </div>
                <div style="float: left; width: 100px;">
                </div>
            </div>
            <div class="dcontent"></div>
            <div style="clear: both; border-bottom: solid 1px #edeaea; height: 18px; line-height: 18px; width: 100%; padding-bottom: 1px;">
                <div class="divButton divPlayCurrentAlbum" style="float: left; width: 100px;" data-albumid="${ID}">播放当前专辑</div>
                <div class="divButton playSelected" style="float: left; width: 100px;">播放选中歌曲</div>
                <div class="divButton addSelected" style="float: left; width: 100px;">加入播放列表</div>
            </div>
        </div>
    </div>
</script>
<div>
    <div style="clear: both; margin-bottom: 10px;"></div>
    <div id="dContent" style="margin-bottom: 10px;">
    </div>
    <div id="divPage" style="margin-bottom: 10px;"></div>
</div>
<div style="clear: both;"></div>
<script type="text/javascript">
    $(document).ready(function () {
        $(".divMenu").removeClass("currentMenu");
        $("#divHomeAlbumList").addClass("currentMenu");
        $("#txtQText").each(function () {
            var target = $(this);
            target.autocomplete({ source: "/AACInfo/QuickSearchAlubm" });
        });
        var page = new pageHandler({ pageID: "divPage", url: "/AACInfo/AlbumJson", tmplID: "tmplAlubms", contentID: "dContent", queryID: "txtQText", isCss: false })
        page.pageInit();
        $("#btnSearch").click(function () {
            page.pageInit();
            
        });

        $(".divExpansion").live("click", function () {
            var self = this;
            var status = $(self).attr("data-status");
            var albumid = $(self).attr("data-albumid");
            var isload = $(self).attr("data-isload");
            if (status == "false") {
                if (isload == "false") {

                    $.get("/AACInfo/AlbumSongs", { id: albumid }, function (r) {
                        $(".divAlbumSongs[data-albumid=" + albumid + "]").children(".dcontent").html(r);
                        $(".divAlbumSongs[data-albumid=" + albumid + "]").show();
                        $(self).attr("data-isload", "true");
                        $(self).text("收起专辑");
                    })
                    $(self).attr("data-status", "true");
                }
                else {
                    $(self).attr("data-status", "true");
                    $(self).text("收起专辑");
                    $(".divAlbumSongs[data-albumid=" + albumid + "]").show();
                }
            }
            else {
                $(self).attr("data-status", "false");
                $(self).text("展开专辑");
                $(".divAlbumSongs[data-albumid=" + albumid + "]").hide();
            }
        });
    });
</script>
